<template>
  <el-dialog
    :close-on-click-modal="false"
    v-model="visibleDialog"
    :title="props.title"
    width="550px"
    draggable
    append-to-body
    destroy-on-close
    align-center
    @close="closeDialog"
  >
    <el-scrollbar max-height="50vh">
      <el-tree
        ref="menuRef"
        node-key="id"
        show-checkbox
        :data="selectMenuList"
        :default-expand-all="true"
        :check-on-click-node="true"
        :item-size="36"
        :indent="30"
      >
        <template #default="{ data }">
          {{ data.permissionName }}
        </template>
      </el-tree>
    </el-scrollbar>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" :loading="posting" @click="handleSubmit"
          >确 定</el-button
        >
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import request from "@/utils/request";

defineOptions({
  name: "UpRoleMenu",
  inheritAttrs: false,
});

const emit = defineEmits(["reset-table", "change-visible"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Array,
    default: () => {
      return [];
    },
  },
});

/** 弹窗显示隐藏 */
const visibleDialog = ref(false);
watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
    if (newVal) {
      getMeuList();
    }
  }
);

const selectMenuList = ref();
const menuRef = ref(ElTree);

async function getMeuList() {
  const { data } = await request({
    url: "/system/refRolePermissionMapping/getPermiss",
    method: "post",
    data: {
      roleId: props.id,
    },
  });
  nextTick(() => {
    const checkedMenuIds = data;
    checkedMenuIds.forEach((menuId: any) =>
      menuRef.value.setChecked(menuId, true, false)
    );
  });
}

/** 编辑赋值 */
watch(
  () => props.id,
  (newVal: string) => {
    if (newVal) {
      // 接口获取最新值
      selectMenuList.value = props.data;
      if (newVal?.length) {
        visibleDialog.value = true;
      }
    }
  }
);

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
}

const posting = ref(false);

/** 保存提交 */
async function handleSubmit() {
  const checkedMenuIds: string[] = menuRef.value
    .getCheckedNodes(false, true)
    .map((node: any) => node.id);

  posting.value = true;
  await request({
    url: "/system/refRolePermissionMapping/save",
    method: "post",
    data: {
      roleId: props.id,
      permissionIds: checkedMenuIds,
    },
  }).finally(() => {
    posting.value = false;
  });

  ElMessage.success(`权限分配成功`);
  closeDialog();
  emit("reset-table");
}

// 组件销毁时调用
onBeforeUnmount(() => {
  visibleDialog.value = false;
  emit("change-visible", false);
});
</script>
